<!--
 * @Descripttion: 图像剪裁组件演示文件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月24日20:58:51
 * @LastEditors:
 * @LastEditTime:
-->

<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="14">
        <el-card shadow="never">
          <sc-cropper
            ref="cropper"
            :src="cropperImg"
            :compress="compress"
            :aspect-ratio="aspectRatio"
          />
        </el-card>
        <el-card
          shadow="never"
          header="参数和方法"
        >
          <el-form label-width="100px">
            <el-form-item label="aspectRatio">
              <el-select
                v-model="aspectRatio"
                placeholder="请选择"
              >
                <el-option
                  label="自由"
                  :value="0"
                />
                <el-option
                  label="1:1"
                  :value="1/1"
                />
                <el-option
                  label="4:3"
                  :value="4/3"
                />
                <el-option
                  label="16:9"
                  :value="16/9"
                />
              </el-select>
              <div class="el-form-item-msg">
                固定选区或者不固定
              </div>
            </el-form-item>
            <el-form-item label="compress">
              <el-select
                v-model="compress"
                placeholder="请选择"
              >
                <el-option
                  label="0.1"
                  :value="0.1"
                />
                <el-option
                  label="0.5"
                  :value="0.5"
                />
                <el-option
                  label="1"
                  :value="1"
                />
              </el-select>
              <div class="el-form-item-msg">
                图像压缩率，值为：0.1-1
              </div>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            plain
            @click="getBase64"
          >
            Base64
          </el-button>
          <el-button
            type="primary"
            plain
            @click="getBlob"
          >
            Blob
          </el-button>
          <el-button
            type="primary"
            plain
            @click="getFile"
          >
            File
          </el-button>
        </el-card>
        <el-card
          shadow="never"
          header="方法结果"
        >
          <img :src="imgData">
        </el-card>
      </el-col>
      <el-col :lg="10">
        <el-card
          shadow="never"
          header="已内置剪裁的上传组件"
        >
          <el-alert
            title="设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求"
            type="success"
            style="margin-bottom:20px;"
          />
          <sc-upload
            v-model="uploadImg"
            title="开启剪裁"
            :cropper="true"
            :compress="1"
            :aspect-ratio="1/1"
          />
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import scCropper from '@/components/scCropper'

export default {
  name: 'Cropper',
  components: {
    scCropper
  },
  data() {
    return {
      cropperImg: 'img/avatar.jpg',
      compress: 0.5,
      aspectRatio: 0,
      uploadImg: '',
      imgData: ''
    }
  },
  methods: {
    getBase64(){
      this.$refs.cropper.getCropData(data=>{
        this.imgData = data
      })
    },
    getBlob(){
      this.$refs.cropper.getCropBlob(blob=>{
        this.imgData = URL.createObjectURL(blob)
      })
    },
    getFile(){
      this.$refs.cropper.getCropFile(file=>{
        let aTag = document.createElement('a')
        aTag.download = file.name;
        aTag.href = URL.createObjectURL(file)
        aTag.click()
      }, 'fileName.jpg', 'image/jpeg')
    }
  }
}
</script>

<style>
</style>
